<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todo列表</title>
</head>
<body>
    <div id="todo-list-demo">
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">添加代办项
                <input v-model="newTodoText" placeholder="E.g. 接孩子放学">
            </label>
            <button>添加</button>
        </form>
        <ul>
            <li
                is="todo-item"
<!--                v-for后接括号，大括号将报id错误-->
                v-for="(todo,index) in todos"
                :key="todo.id"
                :title="todo.title"
                @remove="todos.splice(index,1)"></li>
        </ul>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todo-item',{
        //TODO $emit的用法  事件修饰符的理解（.prevent .stop .once .capture .self）
        template:'<li>' +
                    '{{title}}' +
                    '<button @click="$emit(\'remove\')">删除</button>' +
                '</li>',
        //自定义属性 名字是title
        props:['title']
    })

    new Vue({
        el:"#todo-list-demo",
        data:{
            newTodoText:'',
            todos:[
                {
                    id:1,
                    title:'喂鱼'
                },
                {
                    id:2,
                    title:'散步'
                },
                {
                    id:3,
                    title:'剪草'
                }
            ],
            nextTodoId:4
        },
        methods:{
            addNewTodo:function () {
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText=''
            }
        }
    })
</script>
</body>
</html>